<div class="animated fadeIn">

  <div class="row">

    <!--查询-->
    <div style="margin-bottom: 20px" >
      <button class="btn btn-success btn-radius" data-toggle="modal" (click)="inputmodalbox.show();">添加角色</button>
    </div>

  </div>

  <div class="table-responsive" style="margin-top: 20px">
    <table class="table table-center table-bordered table-hover" style="min-width: 0px">
      <thead class="table-inverse">
      <tr class="text-nowrap">
        <td>序号</td>
        <td>用户角色</td>
        <td>功能设置</td>
        <td>操作</td>
      </tr>
      </thead>
      <tbody class="tab-content">
      <tr class="text-nowrap" *ngFor="let item of rolesDataArr let i=index">
        <td>{{i+1}}</td>
        <td>{{item.name}}</td>
        <td>
          <a href="javascript:;" (click)="operation(item.id)">操作设置</a>
        </td>
        <td>
          <span style=" color: #9E9E9E; cursor: default;" *ngIf="item.is_ss == 1">删除</span>
          <span class="removeBtn" *ngIf="item.is_ss == 0" (click)="delectIndex(item.id)">删除</span>
        </td>
      </tr>

      </tbody>
    </table>
    <p class="noneData" *ngIf="noDatastring">暂无数据</p>

    <!--分页组件-->
    <!--<div style="float: right">
      <pagination [boundaryLinks]="true" [totalItems]="totalItems" [(ngModel)]="currentPage" itemsPerPage="10" [maxSize]="maxSize" previousText="上一页" nextText="下一页" firstText="首页" lastText="末页" (pageChanged)="pageChanged($event)"></pagination>
    </div>-->

  </div>



</div>

<!--操作设置模态框-->
<div *ngIf="operateModal" [config]="{ show: true }" (onHidden)="hideModal()" bsModal #autoShownModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm" [ngClass]="{'modal-danger': !issuccess, 'modal-dialog modal-primary':issuccess}">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">功能设置</h4>
      </div>
      <div class="modal-body" style="text-align: center;">
        <div class="form-group row" *ngFor="let item of allPerData">
          <div class="col-sm-4">
            <div class="checkbox">
              <label>
                <input type="checkbox" [(ngModel)]="item.checked" (click)="changeType($event.target.checked,item.id)">{{item.name}}
              </label>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="return();">取消</button>
        <button type="button" class="btn btn-primary"  (click)="sureSet()">确定</button>
      </div>
    </div>
  </div>
</div>


<!--添加角色模态框-->
<div bsModal #inputmodalbox="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-primary modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">添加角色</h5>
        <button type="button" class="close" (click)="inputmodalbox.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" style="text-align: center" >
        <div class="row">
          <span class="text-line">角色名称：</span>
          <div>
            <input type="text"  class="btn-radius form-control" placeholder="请输入角色名称" [(ngModel)]="roleName" name="name" maxlength="10">
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button"  class="btn btn-secondary" (click)="inputmodalbox.hide()">取消</button>
        <button type="button" class="btn btn-primary" (click)="inputmodalbox.hide();addmodify();">完成</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>

<!--红色删除模态框-->
<div *ngIf="dangerModal" [config]="{ show: true }" (onHidden)="hideModal()" bsModal #autoShownModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm modal-danger">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">提示</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="hideModal()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" style="text-align: center;">
        <p style="margin: 0px">{{completePrompt}}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="hideModal()">取消</button>
        <button type="button" class="btn btn-danger" (click)="confirmDelete();">确定</button>
      </div>
    </div>
  </div>
</div>

<!--绿色删除模态框-->
<div *ngIf="delectModal" [config]="{ show: true }" (onHidden)="confirmshutdown()" bsModal #autoShownModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm" [ngClass]="{'modal-success':issuccess,'modal-danger':!issuccess}">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">提示</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="confirmshutdown()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" style="text-align: center">
        <span>{{modelBody}}</span>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn " [ngClass]="{'btn-success':issuccess,'btn-danger':!issuccess}" (click)="confirmshutdown();">确定</button>
      </div>
    </div>
  </div>
</div>